/**
 * Created by xiniu on 2017/8/29.
 */

import React, {Component, PropTypes} from 'react';
import {
    Image,
    StyleSheet,
    Text,
    View,
    Modal,
    ScrollView,
    TouchableOpacity,
    NativeModules,
    TouchableHighlight,
    TextInput,
    Dimensions,
    Platform,
} from 'react-native';

import moment from "moment";
import Toast from "react-native-simple-toast";
import AppService from "../service/AppService";
import RString from '../language/RString';
import { getFooterBottom } from '../utils/utils';

import Edit from './Edit';
import Distribute from './Distribute';
import SuggestContent from './components/SuggestContent';
import MySuggestList from './MySuggestList';
import CommentList from './components/CommentList';

export default class suggestHandle extends Component {
    // 初始化
    constructor(props) {
        super(props);
        this.state = {
            title: RString('suggest_distribute'),
            userId: '',
            userName: '',
            suggestId: this.props.id,
            commentList: [],
            suggest: {},
            isProject: false,
            show: false,
            modalShow: false,
            filePath: null
        };
    };

    judgeProject(suggest) {
        this.setState({
            isProject: suggest.isProject,
            suggest: suggest
        });
    };

    componentWillMount() {

    };

    goBack = () => {
        const {navigator} = this.props;
        if (navigator) {
            navigator.pop();
        }
    };
    doClose = () => {
        NativeModules.system.navTo("BACK");
    };
    goToEdit = () => {
        let editSeason = this.state.editSeason;
        if (editSeason == null || editSeason.trim() == "") {
            Toast.show(RString('input_editReason'));
        } else {
            this.state.show = false;
            let vm = {
                businessId: this.state.suggestId,
                businessType: 'DOCK',
                anonymous: false,
                userId: global.userId,
                content: global.userName + RString('edit_reason') + editSeason
            };

            // 创建评论
            AppService.createCommentRecord(vm).then(data => {
                if (!!data.errors === true && !!data.errors.length > 0) {
                    Toast.show(data.errors[0].message);
                } else {
                    const {navigator} = this.props;
                    if (navigator) {
                        navigator.push({
                            name: "suggestHandle",
                            component: suggestHandle,
                            params: {
                                id: this.props.id
                            }
                        });
                    }
                }
            });
        }

    };
    goToDistribute = () => {
        const {navigator} = this.props;
        if (navigator) {
            navigator.push({
                name: "Distribute",
                component: Distribute,
                params: {
                    id: this.props.id,
                    rowVersion: this.state.suggest.rowVersion
                }
            });
        }
    };

    // 显示/隐藏 modal
    _setModalVisible() {
        this.setState({
            show: !this.state.show,
        });
    }

    render() {
        return (
            <View style={{position: 'relative', flex: 1}}>
                <Modal
                    animationType='slide'
                    transparent={true}
                    visible={this.state.show}
                    onShow={() => {
                    }}
                    onRequestClose={() => {
                    }}>
                    <View style={styles.modalStyle}>
                        <View style={styles.subView}>
                            <Text style={styles.titleText}>
                                {RString('input_editReason')}
                            </Text>
                            <TextInput style={styles.contentText}
                                       onChangeText={(text) => this.setState({editSeason: text})}
                            />
                            <View style={styles.horizontalLine}/>
                            <View style={styles.buttonView}>
                                <TouchableHighlight underlayColor='transparent'
                                                    style={styles.buttonStyle}
                                                    onPress={this._setModalVisible.bind(this)}>
                                    <Text style={styles.buttonText}>
                                        {RString('cancel')}
                                    </Text>
                                </TouchableHighlight>
                                <View style={styles.verticalLine}/>
                                <TouchableHighlight underlayColor='transparent'
                                                    style={styles.buttonStyle}
                                                    onPress={this.goToEdit.bind(this)}>
                                    <Text style={styles.buttonText}>
                                        {RString('ensure')}
                                    </Text>
                                </TouchableHighlight>
                            </View>
                        </View>
                    </View>
                </Modal>
                <View style={styles.commonHeader}>
                    <TouchableOpacity onPress={this.goBack.bind(this)} style={styles.back}>
                        <Image source={require('./img/leftArrow.png')}/>
                    </TouchableOpacity>
                    <TouchableOpacity onPress={this.doClose.bind(this)} style={styles.toIndex}>
                        <Image source={require('./img/chahao.png')}/>
                    </TouchableOpacity>
                    <View style={{justifyContent: 'center'}}>
                        <Text style={{color: '#fff', fontSize: 16}}>{this.state.title}</Text>
                    </View>
                </View>
                <ScrollView style={styles.wrap}>
                    <SuggestContent suggestId={this.state.suggestId} judgeProject={this.judgeProject.bind(this)}/>
                    <View style={{flex: 1, marginBottom: 30}}>
                        <View style={styles.comment}>
                            <Text style={{color: '#000'}}>{RString('comment')}</Text>
                        </View>
                        <CommentList suggestId={this.state.suggestId}/>
                    </View>
                </ScrollView>
                <View style={styles.buttonWrap}>
                    <View style={{flex: 1, flexDirection: 'row', justifyContent: 'flex-start'}}>
                        <TouchableOpacity style={styles.editBtn} onPress={this._setModalVisible.bind(this)}>
                            <Text style={{color: '#424242'}}>{RString('handleRefuse')}</Text>
                        </TouchableOpacity>
                    </View>
                    <View style={{flex: 1, flexDirection: 'row', justifyContent: 'flex-end'}}>
                        <TouchableOpacity style={styles.distributeBtn} onPress={this.goToDistribute.bind(this)}>
                            <Text style={{color: '#fff'}}>{RString('assign_person')}</Text>
                        </TouchableOpacity>
                    </View>
                </View>
            </View>
        );
    };
}

const styles = StyleSheet.create({
    modalLayout: {
        width: Dimensions.get('window').width,
        height: Dimensions.get('window').height,
        backgroundColor: 'rgba(0,0,0,.8)'
    },
    modalView: {
        width: Dimensions.get('window').width,
        height: Dimensions.get('window').height
    },
    container: {
        flex: 1,
        backgroundColor: '#ECECF0',
    },
    // modal的样式
    modalStyle: {
        // backgroundColor:'#ccc',
        alignItems: 'center',
        justifyContent: 'center',
        flex: 1,
    },
    // modal上子View的样式
    subView: {
        marginLeft: 60,
        marginRight: 60,
        backgroundColor: '#fff',
        alignSelf: 'stretch',
        justifyContent: 'center',
        borderRadius: 10,
        borderWidth: 0.5,
        borderColor: '#ccc',
    },
    // 标题
    titleText: {
        marginTop: 10,
        marginBottom: 5,
        fontSize: 16,
        fontWeight: 'bold',
        textAlign: 'center',
    },
    // 内容
    contentText: {
        margin: 8,
        fontSize: 14,
        textAlign: 'center',
    },
    // 水平的分割线
    horizontalLine: {
        marginTop: 5,
        height: 0.5,
        backgroundColor: '#ccc',
    },
    // 按钮
    buttonView: {
        flexDirection: 'row',
        alignItems: 'center',
    },
    buttonStyle: {
        flex: 1,
        height: 44,
        alignItems: 'center',
        justifyContent: 'center',
    },
    // 竖直的分割线
    verticalLine: {
        width: 0.5,
        height: 44,
        backgroundColor: '#ccc',
    },
    buttonText: {
        fontSize: 16,
        color: '#3393F2',
        textAlign: 'center',
    },

    wrap: {
        backgroundColor: '#fff'
    },
    commonHeader: {
        height: Platform.OS === 'android' ? 50 : 60,
        paddingTop: Platform.OS === 'ios' ? 20 : 0,
        backgroundColor: '#333238',
        flexDirection: 'row',
        justifyContent: 'center',
        position: 'relative'
    },
    back: {
        width: 30,
        position: 'absolute',
        left: 20,
        top: 0,
        height: Platform.OS === 'android' ? 50 : 60,
        paddingTop: Platform.OS === 'ios' ? 20 : 0,
        justifyContent: 'center'
    },
    toIndex: {
        width: 30,
        position: 'absolute',
        left: 70,
        top: 0,
        height: Platform.OS === 'android' ? 50 : 60,
        paddingTop: Platform.OS === 'ios' ? 20 : 0,
        justifyContent: 'center'
    },
    detailWrap: {
        flex: 1,
        paddingLeft: 10,
        paddingRight: 10
    },
    detail: {
        paddingLeft: 10,
        paddingRight: 6,
        flexDirection: 'row'
    },
    detailTop: {
        paddingLeft: 10,
        paddingRight: 6,
        borderBottomWidth: 1,
        borderStyle: 'solid',
        borderBottomColor: '#eee',
        flexDirection: 'row'
    },
    imgWrap: {
        flex: 1,
        justifyContent: 'center'
    },
    themeImg: {
        width: 14,
        height: 14,
        marginLeft: 6
    },
    wordWrap: {
        flex: 8,
        borderBottomWidth: 1,
        borderStyle: 'solid',
        borderBottomColor: '#eee',
        paddingTop: 15,
        paddingBottom: 15,
        flexDirection: 'row'
    },
    lastWordWrap: {
        flex: 8,
        paddingTop: 15,
        paddingBottom: 15,
        flexDirection: 'row'
    },
    detailFont: {
        fontSize: 16,
        color: '#000'
    },
    detailFontBold: {
        fontWeight: 'bold',
        fontSize: 16,
        color: '#000'
    },
    detailTime: {
        fontSize: 14,
        color: '#999'
    },
    uploadImg: {
        width: 80,
        height: 80,
        marginRight: 10,
        marginBottom: 10
    },
    comment: {
        flex: 1,
        height: 25,
        paddingLeft: 20,
        paddingRight: 20,
        backgroundColor: '#ECECF1',
        justifyContent: 'center'
    },
    commentWrap: {
        flex: 1,
        padding: 20
    },
    buttonWrap: {
        width: Dimensions.get('window').width,
        backgroundColor: '#F5F5F5',
        paddingLeft: 20,
        paddingRight: 20,
        flexDirection: 'row',
        alignItems: 'center',
        paddingTop: 10,
        paddingBottom: getFooterBottom() || 10,
        position: 'absolute',
        left: 0,
        bottom: 0,
    },
    editBtn: {
        width: 100,
        borderWidth: 0.5,
        borderStyle: 'solid',
        borderColor: '#333',
        borderRadius: 5,
        paddingTop: 8,
        paddingBottom: 8,
        flexDirection: 'row',
        justifyContent: 'center'
    },
    distributeBtn: {
        width: 100,
        borderRadius: 5,
        paddingTop: 8,
        paddingBottom: 8,
        backgroundColor: '#3399FF',
        flexDirection: 'row',
        justifyContent: 'center'
    }
});
